<template>
  <div class="add-book-container">
    <h3>添加书籍</h3>
    <form @submit.prevent="onSubmit" class="book-form">
      <div class="form-group">
        <label for="name">书籍名称：</label>
        <input type="text" id="name" v-model.trim="book.name" required placeholder="请输入书籍名称" />
      </div>

      <div class="form-group">
        <label for="price">书籍价格：</label>
        <input type="number" id="price" v-model.number="book.price" required placeholder="请输入书籍价格" />
      </div>

      <div class="form-group">
        <label for="description">书籍详情：</label>
        <textarea id="description" v-model.trim="book.description" rows="4" placeholder="请输入书籍详细介绍"></textarea>
      </div>

      <button type="submit" class="btn-submit" @click="onSubmit">提交</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const book = ref({
  name: '',
  price: 0,
  description: ''
})
const router = useRouter()
const onSubmit = () => {
  if (!book.value.name || !book.value.price) {router.push({
    path: '/home/users',
    query: {
      name: book.value.name,
      price: book.value.price,
      description: book.value.description
    }
  });
  }
  
}
</script>


<style scoped>
.add-book-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 30px;
  background: linear-gradient(to right bottom, #ffffff, #f7f9fc);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', sans-serif;
}

h3 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.book-form .form-group {
  margin-bottom: 1.5rem;
}

.book-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #555;
}

.book-form input,
.book-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.book-form input:focus,
.book-form textarea:focus {
  border-color: #42b983;
  outline: none;
  box-shadow: 0 0 5px rgba(66, 185, 131, 0.3);
}

.btn-submit {
  padding: 12px 24px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-submit:hover {
  background-color: #369c6b;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(66, 185, 131, 0.3);
}

.btn-submit:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .btn-submit {
    width: 100%;
  }
}
</style>